<template>
	<div class="kongzhitai">
	
		<div class="left">
			<!--左边第一div内容-->
			<div class="div1">
				
				<div class="div1_left">
					<el-card class="box-card" style="height: 300px;">
					  	<div slot="header" class="clearfix">
					    	<span>待办事项</span>
					    	<el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
					  	</div>
					  	<ul class="card_con">
					  		<li>
					  			<div class="li">
					  				<p class="p1"><i class="el-icon-date"></i></p>
						  			<p class="p2">
						  				<span>待审事项</span>
						  				<span class="span2">66</span>
						  			</p>
					  			</div>
					  			<div class="li">
					  				<p class="p1" style="color: peru;"><i class="el-icon-document"></i></p>
						  			<p class="p2">
						  				<span>待办公文</span>
						  				<span class="span2" style="color: peru;">28</span>
						  			</p>
					  			</div>
					  		</li>
					  		<li>
					  			<div class="li">
						  			<p class="p1" style="color: palevioletred;"><i class="el-icon-time"></i></p>
						  			<p class="p2">
						  				<span>待阅通知</span>
						  				<span class="span2" style="color: palevioletred;">88</span>
						  			</p>
					  			</div>
					  			<div class="li">
						  			<p class="p1" style="color: orange;"><i class="el-icon-message"></i></p>
						  			<p class="p2">
						  				<span>待收邮件</span>
						  				<span class="span2" style="color: orange;">43</span>
						  			</p>
					  			</div>
					  		</li>
					    </ul>
					</el-card>
				</div>
				
				<div class="div1_right">
					<el-card class="box-card" style="height: 300px;" >
					  	<div slot="header" class="clearfix">
					    	<span>常用流程</span>
					    	<el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
					  	</div>
					  	<ul class="card_con">
					  		<el-table
							    :data="tableData3"
							    height="200"
							    border
							    style="width: 100%">
							    <el-table-column
							      prop="date"
							      label="日期"
							      >
							    </el-table-column>
							    <el-table-column
							      prop="name"
							      label="姓名"
							      >
							    </el-table-column>
							    <el-table-column
							      prop="address"
							      label="地址">
							    </el-table-column>
							  </el-table>
					  	</ul>
					</el-card>
				</div>
			</div>
			<!--左边第二个div-->
			<div class="div2">
				<div class="div2_left" >
					<el-button style="float: right;position: absolute;top: 5px;z-index: 10;right: 20px;" type="text">更多>></el-button>
					<el-tabs type="border-card" style="height: 300px;">
					  	<el-tab-pane>
					    	<span slot="label"><i class="el-icon-date"></i> 代办</span>
					    	<div class="card_con">
					    		<el-table
								    :data="tableData3"
								    height="200"
								    stripe
								    style="width: 100%">
								    <el-table-column
								      prop="date"
								      label="日期"
								      width="180">
								    </el-table-column>
								    <el-table-column
								      prop="name"
								      label="姓名"
								      width="180">
								    </el-table-column>
								    <el-table-column
								      prop="address"
								      label="地址">
								    </el-table-column>
								</el-table>
					    	</div>
					  	</el-tab-pane>
					  	<el-tab-pane label="已办">已办</el-tab-pane>
					  	<el-tab-pane label="我的申请">我的申请</el-tab-pane>
					</el-tabs>
				</div>
				
				<div class="div2_right">
					<el-card class="box-card" style="height: 300px;" >
					  	<div slot="header" class="clearfix">
					    	<span>邮件</span>
					    	<el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
					  	</div>
					  	<ul class="card_con">
					  		<el-table
							    :data="tableData"
							    height="200"
							    border
							    style="width: 100%">
							    <el-table-column
							      prop="date"
							      label="日期"
							      >
							    </el-table-column>
							    <el-table-column
							      prop="name"
							      label="姓名"
							      >
							    </el-table-column>
							    <el-table-column
							      prop="shoujianren"
							      label="收件人">
							    </el-table-column>
							  </el-table>
					  	</ul>
					</el-card>
				</div>
				
			</div>
			<!--第三个div-->
			<div class="div3">
				<el-table
				    ref="multipleTable"
				    :data="tableData3"
				    tooltip-effect="dark"
				    style="width: 100%"
				    @selection-change="">
				    <el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				    <el-table-column
				      label="日期"
				      width="120">
				      <template slot-scope="scope">{{ scope.row.date }}</template>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="姓名"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="address"
				      label="地址"
				      show-overflow-tooltip>
				    </el-table-column>
				</el-table>
			</div>
			<!--第四个div-->
			<div class="div4">
				<!--图表-->
				<div class="div4_left">
					<schart class="schart" canvasId="pie" :data="data" type="pie" :options="options"></schart>
				</div>
				
				<div class="div4_right">
					<schart class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
				</div>
    				
			</div>
			
		</div>
		
		<div class="right">
			<!--日历-->
			<div class="rili">
				<vue-event-calendar :events="demoEvents" @month-changed="monthChange" @day-changed="dayChange">
					<template scope="props" >
						<!--{{props}}--><p v-show="props.showEvents.length!=1" style="color: white;">这里是存放您记录的日期标签内容</p>
				        <div v-for="(event, index) in props.showEvents" class="event-item" v-if="props.showEvents.length==1">
				          <!-- 这里拿到的是传入的单个event所有数据 -->
				          	<div class="title">{{event.title}}</div>
				          	<div class="desc">{{event.desc}}</div>
				        </div>
				    </template>
				</vue-event-calendar>
			</div>
			
			
		</div>
		
		
		
	</div>
</template>

<script>
//	图表npm install vue-schart -S   http://blog.gdfengshuo.com/example/#/vue-schart
	import Schart from 'vue-schart';
	export default{
		components:{
	        Schart
	    },
		name:'kongzhitai',
		data(){
			return{
				tableData: [{
		          date: '2016-05-03',
		          name: '冯爱国',
		          shoujianren: '张三'
		        }, {
		          date: '2016-05-02',
		          name: '王小虎',
		          shoujianren: '张三'
		        }, {
		          date: '2016-05-04',
		          name: '马远',
		          shoujianren: '李四'
		        }, {
		          date: '2016-05-01',
		          name: '李扬',
		          shoujianren: '张的'
		        }],
		        
				tableData3: [{
		          date: '2016-05-03',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-02',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-04',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-01',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-08',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-06',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }, {
		          date: '2016-05-07',
		          name: '王小虎',
		          address: '上海市普陀区金沙江路 1518 弄'
		        }],
		        //日历
		        demoEvents: [{
			        date: '2018/9/15',
			        title: '今天参加了重要会议',
			        desc: '全会听取和讨论了习近平受中央政治局委托作的工作报告，审议通过了《关于新形势下党内政治生活的若干准则》、《中国共产党党内监督条例》和《关于召开党的第十九次全国代表大会的决议》'
			    },{
			        date: '2018/9/12',
			        title: '工作日',
			        desc: '今天要处理一些公司内务事情'
			    }],
			    //图表
	            data: [
	                {name: '2014', value: 1342},
	                {name: '2015', value: 2123},
	                {name: '2016', value: 1654},
	                {name: '2017', value: 1795},
	            ],
	            options: {
	                padding: 50,                   // canvas 内边距
	                bgColor: '#FFFFFF',            // 默认背景颜色
	                title: 'vue-schart互动演示案例',// 图表标题
	                titleColor: '#000000',         // 图表标题颜色
	                titlePosition: 'top',      // 图表标题位置: top / bottom
	                yEqual: 5,                     // y轴分成5等分
	                fillColor: '#1E9FFF',          // 默认填充颜色
	                contentColor: '#eeeeee',       // 内容横线颜色
	                axisColor: '#666666',          // 坐标轴颜色
	                
	            },
			}
		},
		mounted(){
			
		},
		methods:{
			//日历
			monthChange(month) {
		      console.log(month)
		    },
		    dayChange(day) {
		      console.log(day)
		      if(day.events.length==0){
		      	this.$confirm('是否要添加重要标记', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		       	}).then(() => {
		       		
		        }).catch(() => {
		        	
		        });
		      }
		    },
		    
		    
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.kongzhitai{
		width: 100%;padding: 10px;background: #f2f2f2;box-sizing: border-box;display: flex;min-width: 1000px;height: 95%;
		.left{
			width: 80%;background: #f2f2f2;margin-right: 10px;
			.div1{
				display: flex;width: 100%;
				.div1_left{
					flex:1;margin-right: 10px;font-size: 12px;
					.clearfix{
						display: flex;justify-content: space-between;height:10px;
						span{
							font-size: 14px;
						}
					}
					.card_con{
						padding: 0px 10px;box-sizing: border-box;overflow: hidden;
						li{
							display: flex;
							.li{
								flex: 1; height: 100px;background: #ddd;margin-right: 10px;margin-bottom: 10px;display: flex;padding: 10px;box-sizing: border-box;
								.p1{font-size: 70px;line-height: 80px;color: green;}
								.p2{
									font-size: 17px;height: 60px;margin-top: 16px;color:#5a5a5a;margin-left: 15px;
									span{display:block;white-space: nowrap;}
									.span2{color: green;font-size: 30px;margin-top: 4px;}
								}
							}
						}
					}
					
				}
				.div1_right{
					flex: 1;font-size: 12px;overflow: hidden;
					.clearfix{
						display: flex;justify-content: space-between;height:10px;
						span{
							font-size: 14px;
						}
					}
				}
			}
			.div2{
				display: flex;width: 100%;margin-top: 10px;
				.div2_left{
					flex:1;margin-right: 10px;font-size: 12px;position: relative;overflow: hidden;
				}
				
				.div2_right{
					flex: 1;font-size: 12px;overflow: hidden;
					.clearfix{
						display: flex;justify-content: space-between;height:10px;
						span{
							font-size: 14px;
						}
					}
				}
			}
			.div3{
				margin-top: 10px;
			}
			.div4{
				margin-top: 10px;display: flex;width: 100%;
				.div4_left{
					width: 50%;
					.schart{
						width: 100%;height: 400px;
    				}
				}
				.div4_right{
					width: 50%;
					.schart{
						width: 100%;height: 400px;
    				}
				}
			}
			
		}
		
		.right{
			width: 20%;
		}
		
	}
</style>